<template>
  <view class="container">
    <!-- 自定义顶部导航栏 -->
    <view class="custom-app-bar-wrapper" :style="{ height: `calc(100rpx + ${statusBarHeight}px)` }">
      <view class="custom-app-bar" :style="{ top: statusBarHeight + 'px' }">
        <u-icon name="arrow-left" size="40" class="back-icon" @click="goBack"></u-icon>
        <text class="title">选择书籍</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content" :style="{ paddingTop: `calc(100rpx + ${statusBarHeight}px)` }">
      <!-- 绘本集列表 -->
      <view class="bookshelf-section" v-if="!selectedBookShelf">
        <view class="section-title">选择绘本集</view>
        <view class="bookshelf-list">
          <view class="bookshelf-item" v-for="bookshelf in bookShelfList" :key="bookshelf.id" @click="selectBookShelf(bookshelf)">
            <image class="bookshelf-cover" :src="bookshelf.image || '/static/empty.png'" mode="aspectFill"></image>
            <view class="bookshelf-info">
              <view class="bookshelf-title">{{ bookshelf.title }}</view>
              <view class="bookshelf-meta">
<!--                <text class="bookshelf-count">{{ bookshelf.quantity }}本</text>-->
<!--                <text class="bookshelf-type">{{ getBookShelfType(bookshelf.type) }}</text>-->
              </view>
            </view>
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="bookShelfList.length === 0 && !loading">
          <image src="/static/empty.png" class="empty-image"></image>
          <text class="empty-text">暂无绘本集</text>
        </view>
      </view>

      <!-- 书籍列表 -->
      <view class="books-section" v-if="selectedBookShelf">
        <view class="section-header">
          <u-icon name="arrow-left" size="24" color="#007aff" @click="backToBookShelfList"></u-icon>
          <text class="section-title">{{ selectedBookShelf.title }}</text>
        </view>
        <view class="books-grid">
          <view class="book-item" v-for="book in bookList" :key="book.id" @click="selectBook(book)">
            <view class="book-cover-container">
              <image class="book-cover" :src="getBookCoverUrl(book)" mode="aspectFit"></image>
            </view>
            <text class="book-name">{{ book.bookName }}</text>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="bookList.length === 0 && !loading">
          <image src="/static/empty.png" class="empty-image"></image>
          <text class="empty-text">该绘本集暂无书籍</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as BookShelfApi from '@/api/bookShelf'
import * as BookApi from '@/api/book'

export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      bookShelfList: [], // 绘本集列表
      selectedBookShelf: null, // 当前选中的绘本集
      bookList: [], // 当前绘本集的书籍列表
      loading: false
    };
  },

  onLoad() {
    this.loadBookShelfList();
  },

  methods: {
    /**
     * 加载绘本集列表
     */
    async loadBookShelfList() {
      this.loading = true;
      try {
        const response = await BookShelfApi.getCategoryList({
          type: '1', // 1：英文书架 2：中文书架
          recycleBin: 'false'
        });

        if (response.code === 0 && response.data) {
          // 提取所有绘本集
          this.bookShelfList = response.data;
        }
      } catch (error) {
        console.error('加载绘本集列表失败:', error);
        uni.showToast({
          title: '加载绘本集失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    /**
     * 选择绘本集
     */
    async selectBookShelf(bookshelf) {
      this.selectedBookShelf = bookshelf;
      await this.loadBookList(bookshelf.id);
    },

    /**
     * 加载书籍列表
     */
    async loadBookList(bookShelfId) {
      this.loading = true;
      try {
        const response = await BookApi.getBookList({
          bookShelfId: bookShelfId,
          pageNo: 1,
          pageSize: 100
        });

        if (response.code === 0 && response.data) {
          this.bookList = response.data.list || [];
        }
      } catch (error) {
        console.error('加载书籍列表失败:', error);
        uni.showToast({
          title: '加载书籍失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    /**
     * 返回绘本集列表
     */
    backToBookShelfList() {
      this.selectedBookShelf = null;
      this.bookList = [];
    },

    /**
     * 选择书籍
     */
    selectBook(book) {
      // 触发选择事件，传递选中的书籍数据
      const eventChannel = this.getOpenerEventChannel();
      if (eventChannel) {
        eventChannel.emit('selectBook', {
          book: book
        });
      }

      // 返回上一页
      uni.navigateBack();
    },

    /**
     * 获取书籍封面URL
     */
    getBookCoverUrl(book) {
      if (book && book.image) {
        return book.image;
      }
      return '/static/empty.png';
    },

    /**
     * 获取绘本集类型文本
     */
    getBookShelfType(type) {
      switch (type) {
        case 1:
          return '英文';
        case 2:
          return '中文';
        default:
          return '';
      }
    },

    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.custom-app-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #007AFF;
}

.custom-app-bar {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  position: relative;
}

.back-icon {
  color: #fff;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}

.content {
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-header .section-title {
  margin-left: 16rpx;
  margin-bottom: 0;
}

.bookshelf-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.bookshelf-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.bookshelf-item:last-child {
  border-bottom: none;
}

.bookshelf-cover {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #e5e5e5;
}

.bookshelf-info {
  flex: 1;
}

.bookshelf-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.bookshelf-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.bookshelf-count {
  font-size: 24rpx;
  color: #666;
}

.bookshelf-type {
  font-size: 24rpx;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.book-cover-container {
  position: relative;
  margin-bottom: 12rpx;
}

.book-cover {
  width: 120rpx;
  height: 150rpx;
  border-radius: 8rpx;
  background-color: #e5e5e5;
}

.book-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 1.4;
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.empty-image {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
